<template>
  <m-layout>
    <mt-header slot="header" title="战术板" />
    <div slot="body">
      <m-section>
        <div v-for="item in getKeys(sportTypeList)" :key="item">
          <div v-if="sportTypeList[item].length>0">
            <div class="type" v-for="itm in sportTypeList[item]" :key="itm.key">
              <div class="heading heading-3">{{item}}</div>
                <mt-cell class="sport-item" :title="itm.value" is-link :to="{
                           name: 'tacticalDetail',
                           params: {type: sportType, tacticId: itm.key},
                           query: {orgUserId: orgUserId}
                         }">
                </mt-cell>
            </div>
          </div>
        </div>
      </m-section>
    </div>
  </m-layout>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      sportTypeList: state => state.tactical.sportTypeList
    })
  },
  data () {
    return {
      value: '',
      sportType: this.$route.params.id,
      orgUserId: this.$route.query.authOrgId
    }
  },
  mounted () {
    this.$store.dispatch('tactical/sportTypeList', {
      orgUserId: this.orgUserId,
      sportType: this.sportType
    })
  },
  methods: {
    getKeys (obj) {
      return Object.keys(obj)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
